<template>
    <div id="app">
        <el-col :span="24" v-loading="loading">
            <el-col class="title">{{title}}</el-col>
            <el-col class="body-box">
                <transition name="el-zoom-in-center">
                    <div class="status-box" v-show="show">
                        <i :class="status?'el-icon-check':'el-icon-close'"></i>
                    </div>
                </transition>
            </el-col>
            <div class="info-box" v-if="infoShow">
                <div class="info-item"><span>社区：</span>{{inviteInfo.communityName}}</div>
                <div class="info-item"><span>门卡类型：</span>{{inviteInfo.type==1?'时效卡':'次卡'}}</div>
                <div class="info-item"><span>受邀人：</span>{{inviteInfo.invitee.name}}</div>
            </div>
            <div class="info-box" v-if="authShow">
                <div class="info-item"><span>姓名：</span>{{authInfo.name}}</div>
            </div>
        </el-col>
    </div>
</template>

<script>

export default {
    name: 'App',
    data() {
        return {
            loading:true,
            params:{},// 请求参数
            title:'',
            status:false,
            show:false,
            infoShow:false,
            inviteInfo:{},
            authInfo:{},
            authShow:false
        }
    },
    methods:{

        /**判断邀请卡是否合法 */
        initInvite(){
            this.title='访客身份码核验'
            this.$axios.get(this.$url+'/client/invite?code='+this.params.id).then(res=>{


                this.loading=false;
                let info=res.data.data.inviteInfo
                
                // 格式化受邀人
                info.invitee=JSON.parse(info.invitee);
                this.inviteInfo=info;
                
                // 获取邀请卡状态
                if(res.data.status.code==200){
                    this.status=true;
                }else{
                    this.status=false
                }
                
                this.show=true;
                this.infoShow=true;
                
            })
        },

        /**判断出入码是否合法 */
        initEpidemic(){
            
            this.title="社区出入码核验";
            this.$axios.get(this.$url+'/client/epidemic?id='+this.params.id).then(res=>{
                console.log(res);
                this.loading=false;
                if(res.data.status.code==200){
                    this.status=true;
                    this.authShow=true;
                    this.authInfo=res.data.data.info;
                }else{
                    this.status=false;
                }
                
                this.show=true;
            })
        }
    },
    mounted() {
        let params={}
        let href=location.href;
        href=href.substring(href.indexOf('?')+1);
        let arr=href.split("&");
        arr.forEach(item=>{
            let a=item.split("=");
            params[a[0]]=a[1]
        });
        this.params=params;

        // 判断是否有ID属性
        if(this.params.id==undefined){
            this.title="此码不合法"
            this.loading=false;
            this.status=false;
            this.show=true;
            return;
        }

        if(params.type=='epidemic'){
            this.initEpidemic();
        }else{
            this.initInvite();
        }
    },
}
</script>

<style>
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
#app{
    height: 100vh;
    width: 100vw;
    background-color: #F5F5F7;
}
.title{
    height: 20vh;
    line-height: 20vh;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}
.body-box{
    height: 60vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.status-box{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 2px 4px 12px rgb(0 0 0 / 8%);
    background-color: #fff;
    line-height: 350px;
    text-align: center;
    
}
.el-icon-check{
    font-size: 100px;
    color: #1DD66C;
    font-weight: 900;
}
.el-icon-close{
    font-size: 100px;
    color: #FA5151;
    font-weight: 900;
}
.info-box{
    line-height: 35px;
    text-align: center;
    font-size: 16px;
}
.info-item span{
    font-weight: 600;
}
</style>
